<script setup>
</script>

<template>
  <div class="index">
    <div class="indextopp">
      <div class="indextop">
        <div class="logo">
          <img src="../assets/logo.png" alt="" /> BLAZER预约挂号统一平台
        </div>
        <div class="help">
          <span style="margin-right: 10px">帮助中心</span>
          <span class="login" v-if="username == ''" @click="login()"
            >登录/注册</span
          >
          <el-dropdown style="line-height: 19px">
            <span class="el-dropdown-link">
              {{ username }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="smrz">实名认证</el-dropdown-item>
                <el-dropdown-item @click="ghdd">挂号订单</el-dropdown-item>
                <el-dropdown-item @click="jzrgl">就诊人管理</el-dropdown-item>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!-- <span class="login" v-if="username!== ''">{{username}}</span> -->
        </div>
      </div>
    </div>
    <div class="routerview">
      <router-view></router-view>
    </div>
    <div class="bottomindex">
      <div class="bottomsm">
        <div>
          京ICP备&nbsp;&nbsp;&nbsp;13018369号&nbsp;&nbsp;&nbsp;电话挂号010-56253825
        </div>
        <div>
          联系我们&nbsp;&nbsp;&nbsp;合作伙伴&nbsp;&nbsp;&nbsp;用户协议&nbsp;&nbsp;&nbsp;隐私协议
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="登录" width="30%" draggable>
      <el-form :model="form">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名" v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input placeholder="请输入验证码" v-model="form.code"></el-input>
        </el-form-item>
        <el-button @click="hqyzm">获取验证码</el-button>
      </el-form>
      <el-button
        type="primary"
        @click="logininfo"
        style="margin-top: 10px; width: 100%"
        >登录</el-button
      >
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";
import instance from "../assets/axios";
const getlogin = async () => {
  const res = await instance.post("admin/employee/login", {
    username: "admin",
    password: "123456",
  });
  console.log(res);
};
const router = useRouter();
const form = ref({});
const username = ref("");
const jzrgl=()=>{
   router.push({
    path: "jzrgl",
  });
}
const dialogVisible = ref(false);
const hqyzm = async () => {
  if (!form.value.phone) {
    ElMessage({
      message: "请输入手机号",
      type: "warning",
      duration: 3 * 1000,
    });
  } else {
    const res = await instance.get(`/api/sms/send/${form.value.phone}`);
    console.log(res);
    form.value.code = res.data;
    SMS.send(
      form.value.phone,
      {
        text: `您的验证码是:${res.data}`,
        extend: "000000",
        ext: "001",
        uid: "1212",
      },
      (res1) => {
        console.log(res1);
        if (res1.code === 200) {
          alert("短信发送成功");
        } else {
          alert(`短信发送失败，原因：${res1.msg}`);
        }
      }
    );
  }
};
const login = () => {
  dialogVisible.value = true;
};
const logininfo = async () => {
  const res = await instance.post("/api/user/login", form.value);
  console.log(res);
  if (res.code == 200) {
    dialogVisible.value = false;
    window.localStorage.setItem("token", res.data.token);
    window.localStorage.setItem("name", res.data.name);
    username.value = window.localStorage.getItem("name");
  }
};

const logout = () => {
  window.localStorage.clear();
  router.go(0);
};
const smrz = () => {
  router.push({
    path: "smrz",
  });
};
const ghdd=()=>{
  router.push({
    path: "ghdd",
  });
}
onMounted(() => {
  if (window.localStorage.getItem("name")) {
    username.value = window.localStorage.getItem("name");
  } else {
    username.value = "";
  }
});
</script>
<style>
.el-dropdown-link {
  cursor: pointer;
  /* color: var(--el-color-primary); */
  display: flex;
  align-items: center;
}
</style>
<style scoped>
.bottomsm {
  width: 1200px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottomindex {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  background: #f0f2f5;
}
.help {
  font-size: 14px;
  color: #bbb;
}
.logo {
  font-size: 20px;
  color: #55a6fe;
}
.logo img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  vertical-align: middle;
}
.index {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.indextopp {
  position: fixed;
  top: 0px;
  display: flex;
  z-index: 999;
  width: 100%;

  background: #fff;
  justify-content: center;
}
.indextop {
  width: 1200px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.routerview {
  margin-top: 70px;
  width: 1200px;
  min-height: 700px;
}
.login {
  cursor: pointer;
}
</style>
